<template>
  <div>
    <div class="comment-title"><i class="iconfont iconpinglunzu" />评论</div>
  <!-- 评论框 -->
    <div class="comment-input-wrapper">
      <div style="display: flex">
        <v-avatar size="40">
          <img
              v-if="this.$store.state.avatar"
              :src="this.$store.state.avatar"
          />
          <img
            v-else
            :src="this.$store.state.blogInfo.websiteConfig.touristAvatar"
          />
        </v-avatar>
        <div style="width: 100%" class="ml-3">
          <div class="comment-input">
            <textarea
              class="comment-textarea"
              v-model="commentContent"
              placeholder="写点文字，记录当下"
              auto-grow
              dense
              />
          </div>
        <!-- 操作按钮 -->
          <div class="emoji-container">
            <span
              :class="chooseEmoji ? 'emoji-btn-active' : 'emoji-btn'"
              @click="chooseEmoji = !chooseEmoji"
              >
              <i class="iconfont iconbiaoqing" />
            </span>
            <button
              @click="insertComment"
              class="upload-btn v-comment-btn"
              style="margin-left: auto"
              >
              提交
            </button>
          </div>
        <!-- 表情框 -->
          <emoji @addEmoji="addEmoji" :chooseEmoji="chooseEmoji" />
        </div>
      </div>
    </div>
  <!-- 评论详情 -->
    <div v-if="count > 0 && reFresh" >
    <!-- 评论数量 -->
      <div class="count">{{count}} 评论</div>
    <!-- 评论列表 -->
      <div
        style="display: flex"
        class="pl-5"
        v-for="(item, index) of commentList"
        :key="item.id"
        >
      <!-- 头像 -->
        <v-avatar size="40" class="comment-avatar">
          <img :src="item.avatar" />
        </v-avatar>
        <div class="comment-meta">
      <!-- 用户名 -->
        <div class="comment-user">
          <span v-if="!item.webSite">{{ item.nickname }}</span>
          <a v-else :href="item.webSite" target="_blank">
            {{ item.nickname }}
          </a>
          <span class="blogger-tag" v-if="item.userId == 1">博主</span>
        </div>
        <!-- 信息 -->
        <div class="comment-info">
          <!-- 楼层 -->
          <span style="margin-right: 10px">{{ count - index}}楼</span>
          <!-- 发表时间 -->
          <span style="margin-right: 10px">{{ item.createTime | date}}</span>
        <!-- 点赞 -->
          <span
            :class="isLike(item.id) + ' iconfont icondianzan'"
            @click="like(item)"
            />
          <span v-show="item.likeCount > 0">{{ item.likeCount }}</span>
        <!-- 回复 -->
          <span class="reply-btn" @click="replyComment(index,item)">回复</span>
        </div>
      <!-- 评论内容 -->
        <p v-html="item.commentContent" class="comment-content" />
      <!-- 回复人 -->
        <div
          style="display: flex"
          v-for="reply of item.replyDtoList"
          :key="reply.id"
          >
        <!-- 头像 -->
          <v-avatar size="36" class="comment-avatar">
            <img :src="reply.avatar" />
          </v-avatar>
          <div class="reply-meta">
          <!-- 用户名 -->
          <div class="comment-user">
            <span v-if="!reply.webSite">{{ reply.nickname }}</span>
            <a v-else :href="reply.webSite" target="_blank">
              {{ reply.nickname }}
            </a>
            <span class="blogger-tag" v-if="reply.userId == 1">博主</span>
          </div>
        <!-- 信息 -->
          <div class="comment-info">
          <!-- 发表时间 -->
            <span style="margin-right: 10px">
              {{ reply.createTime | date }}
            </span>
          <!-- 点赞 -->
            <span
              :class="isLike(reply.id) + ' iconfont icondianzan'"
              @click="like(reply)"
              />
            <span v-show="reply.likeCount > 0">{{ reply.likeCount }}</span>
          <!-- 回复 -->
            <span class="reply-btn" @click="replyComment(index, reply)">回复</span>
          </div>
        <!-- 回复内容 -->
          <p class="comment-content">
          <!-- 回复用户名 -->
            <template v-if="reply.replyUserId != item.userId">
              <span v-if="!reply.replyWebSite" class="ml-1">
                @{{ reply.replyNickname }}
              </span>
              <a
                v-else
                :href="reply.replyWebSite"
                target="_blank"
                class="comment-nickname ml-1"
                >
                @{{ reply.replyNickname }}
              </a>
              ，
            </template>
            <span v-html="reply.commentContent"></span>
          </p>
        </div>
      </div>
    <!-- 回复数量 -->
      <div
        class="mb-3"
        style="font-size: 0.76rem;color: #6d757a"
        v-show="item.replyCount > 3"
        ref="check"
        >共<b>{{item.replyCount}}</b>条回复，
        <span
          style="color: #00a1d6;cursor: pointer"
          @click="checkReplies(index, item)"
          >点击查看</span>
      </div>
          <!--  回复分页 -->
          <div
            class="mb-3"
            style="font-size: 0.76rem;color: #222222;display: none"
            ref="paging"
            >
            <span style="padding-right: 10px">
              共{{ Math.ceil(item.replyCount/ 5) }}页
            </span>
            <paging
              ref="page"
              :totalPage="Math.ceil(item.replyCount / 5)"
              :index="index"
              :commentId="item.id"
              @changeReplyCurrent="changeReplyCurrent"
              />
    </div>
  <!--    回复框    -->
  <reply :type="type" ref="reply" @reloadReply="reloadReply" />
        </div>
      </div>
<!--     加载按钮 -->
      <div class="load-wrapper">
        <v-btn outlined v-if="count > commentList.length" @click="listComments">
          加载更多...
        </v-btn>
      </div>
    </div>
<!--   没有评论提示 -->
    <div v-else style="padding: 1.26rem;text-align: center">
      你确定不留下点什么~~~
    </div>
  </div>
</template>

<script>
import Emoji from "@/components/emoji/Emoji";
import Paging from "@/components/paging/Paging";
import Reply from "@/components/reply/Reply";
import EmojiList from "../../assets/js/emoji"
import {checkReplies, saveComment, saveCommentLike, listComments} from "@/api/comment";
export default {
  name: "Comment",
  components: {Reply, Paging, Emoji},
  props:{
    type:{
      type:Number
    }
  },
  created() {
    this.listComments()
  },
  data(){
    return{
      reFresh:true,
      commentContent:"",
      chooseEmoji:false,
      current:1,
      commentList:[],
      count:0
    }
  },
  methods:{
    replyComment(index, item) {
      this.$refs.reply.forEach(item => {
        item.$el.style.display = "none"
      })
      // 传值给回复框
      this.$refs.reply[index].commentContent = "";
      this.$refs.reply[index].nickname = item.nickname;
      this.$refs.reply[index].replyUserId = item.userId;
      this.$refs.reply[index].parentId = this.commentList[index].id;
      this.$refs.reply[index].chooseEmoji = false;
      this.$refs.reply[index].index = index;
      this.$refs.reply[index].$el.style.display = "block";
    },
    addEmoji(key) {
      this.commentContent += key
    },
    checkReplies(index, item) {
      checkReplies(item.id,{current:1,size:5}).then(({data}) => {
        this.$refs.check[index].style.display = "none"
        item.replyDtoList = data.data
        // 超过1页才显示分页
        if (Math.ceil(item.replyCount / 5) > 1) {
          this.$refs.paging[index].style.display = "flex"
        }
      })
    },
    changeReplyCurrent(current, index, commentId) {
      // 查看下一页回复
      checkReplies(commentId,{current:current,size:5}).then(({data}) => {
        this.commentList[index].replyDtoList = data.data
      })
    },
    listComments(){
      // 查看评论
      const path = this.$route.path
      const arr = path.split("/")
      const param = {
        current: this.current,
        type: this.type,
      }
      switch (this.type) {
        case 1:
        case 3:
          param.topicId = arr[2]
          break
        default:
          break
      }
      listComments(param).then(({data}) => {
        if (this.current == 1) {
          this.commentList = data.data.recordList
        } else {
          this.commentList.push(...data.data.recordList)
        }
        this.current++
        this.count = data.data.count
        this.$emit("getCommentCount", this.count)
      })
    },
    insertComment(){
      // 判断登录
      if (!this.$store.state.userId) {
        this.$store.state.loginFlag = true
        return false
      }
      // 判空
      if (this.commentContent.trim() == "") {
        this.$toast({type:"error", message:"评论不能为空"})
        return false
      }
      // 解析表情
      var reg = /\[.+?\]/g
      this.commentContent = this.commentContent.replace(reg, function (str) {
        return (
            "<img src='" + EmojiList[str] + "' width='24' height='24' style='margin: 0 1px;vertical-align: text-bottom'/>"
        )
      })
      // 发起请求
      const path = this.$route.path
      const arr = path.split("/")
      var comment = {
        commentContent:this.commentContent,
        type:this.type
      }
      switch (this.type) {
        case 1:
        case 3:
           comment.topicId = arr[2]
           break
        default:
          break
      }
      this.commentContent = ""
      saveComment(comment).then(({data}) => {
        if (data.flag) {
          // 查询最新评论
          this.current = 1
          this.listComments()
          const  isReview = this.$store.state.blogInfo.websiteConfig.isCommentReview
          if (isReview){
            this.$toast({type:"warnning",message:"评论成功，正在审核中"})
          } else {
            this.$toast({type:"success", message:"评论成功"})
          }
        } else {
          this.$toast({type:"error", message:data.message})
        }
      })
    },
    like(comment) {
      // 判断登录
      if (!this.$store.state.userId) {
        this.$store.state.loginFlag = true
        return false
      }
      // 发送请求
      saveCommentLike(comment.id).then(({data}) => {
        if (data.flag) {
          // 判断是否点赞
          if (this.$store.state.commentLikeSet.indexOf(comment.id) != -1) {
            this.$set(comment, "likeCount",comment.likeCount - 1)
          } else {
            this.$set(comment, "likeCount", comment.likeCount + 1)
          }
          this.$store.commit("commentLike",comment.id)
        }
      })
    },
    reloadReply(index) {
      checkReplies(this.commentList[index].id, {
        current:this.$refs.page[index].current,
        size:5
      }).then(({data}) => {
        this.commentList[index].replyCount++
        //回复大于5条展示分页
        if (this.commentList[index].replyCount > 5) {
          this.$refs.paging[index].style.display = "flex"
        }
        this.$refs.check[index].style.display = "none"
        this.$refs.reply[index].$el.style.display = "none"
        this.commentList[index].replyDtoList = data.data
      })
    }
  },
  computed:{
    isLike(){
      return function (commentId) {
        const commentLikeSet = this.$store.state.commentLikeSet
        return commentLikeSet.indexOf(commentId) != -1 ? "like-active" : "like"
      }
    }
  },
  watch:{
    commentList(){
      this.reFresh = false
      this.$nextTick(() => {
        this.reFresh = true
      })
    }
  }
}
</script>

<style scoped>
.blogger-tag {
  background: #ffa51e;
  font-size: 12px;
  display: inline-block;
  border-radius: 2px;
  color: #fff;
  padding: 0 5px;
  margin-left: 6px;
}
.comment-title {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 40px;
  margin-bottom: 10px;
}
.comment-title i {
  font-size: 1.5rem;
  margin-right: 5px;
}
.comment-input-wrapper {
  border: 1px solid #90939950;
  border-radius: 4px;
  padding: 10px;
  margin: 0 0 10px;
}
.count {
  padding: 5px;
  line-height: 1.75;
  font-size: 1.25rem;
  font-weight: bold;
}
.comment-meta {
  margin-left: 0.8rem;
  width: 100%;
  border-bottom: 1px dashed #f5f5f5;
}
.reply-meta {
  margin-left: 0.8rem;
  width: 100%;
}
.comment-user {
  font-size: 14px;
  line-height: 1.75;
}
.comment-user a {
  color: #1abc9c !important;
  font-weight: 500;
  transition: 0.3s all;
}
.comment-nickname {
  text-decoration: none;
  color: #1abc9c !important;
  font-weight: 500;
}
.comment-info {
  line-height: 1.75;
  font-size: 0.75rem;
  color: #b3b3b3;
}
.reply-btn {
  cursor: pointer;
  float: right;
  color: #ef2f11;
}
.comment-content {
  font-size: 0.875rem;
  line-height: 1.75;
  padding-top: 0.625rem;
  white-space: pre-line;
  word-wrap: break-word;
  word-break: break-all;
}
.comment-avatar {
  transition: all 0.5s;
}
.comment-avatar:hover {
  transform: rotate(360deg);
}
.like {
  cursor: pointer;
  font-size: 0.875rem;
}
.like:hover {
  color: #eb5055;
}
.like-active {
  cursor: pointer;
  font-size: 0.875rem;
  color: #eb5055;
}
.load-wrapper {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.load-wrapper button {
  background-color: #49b1f5;
  color: #fff;
}
</style>
